import React, {useRef, useState} from 'react'
import {
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    Dimensions,
    View,
    Text, PixelRatio, TouchableNativeFeedback,
} from 'react-native'
import Entypo from 'react-native-vector-icons/Entypo'
import AntDesign from 'react-native-vector-icons/AntDesign'
import theme from '../../config/theme'
import config, {methodFlexAlign} from '../../config/global.config'
import {Modalize} from 'react-native-modalize'
import {WebView} from "react-native-webview";
// import VideoPlayer from './VideoPlayer'
const nums: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 999]

enum ModalEnum {
    D,
    L
}

const videos = []

function VideoInfo() {
    const [active, setActive] = useState(0)
    // 全屏跟半屏还没完成。
    const [fullScreen, setFullScreen] = useState(false)
    const [modalType, setModalType] = useState(-1)

    const onOpenDesc = (type: ModalEnum) => {
        setModalType(type)
        modalizeRef.current?.open()
    }

    const onCloseDesc = () => {
        modalizeRef.current?.close()
    }

    const modalizeRef = useRef<Modalize>(null)


    function desView() {
        return (
            <View style={config.bodyPadding}>
                <Text style={styles.des}>别名：爱情的迫降 / 爱情迫降</Text>
                <Text style={styles.des}>年代：2020</Text>
                <Text style={styles.des}>编剧：朴智恩</Text>
                <Text style={styles.des}>导演：李政孝</Text>
                <Text style={styles.des}>主演：玄彬 / 孙艺珍</Text>
                <Text style={{color: theme.deepGrey}}>简介：《爱的迫降／爱情的迫降》爱的迫降在线观看,《爱的迫降》是韩国tvN电视台于2019年12月14日首播的浪漫爱情剧，由李政孝执导，朴智恩编剧，玄彬、孙艺珍等主演；中文名：爱的迫降；外文名：사랑의
                    불시착；其它译名：爱情的迫降，爱情迫降；
                    内容在讲述5年前，因滑翔伞事故降到朝鲜的财阀继承女河彩允（孙艺珍饰）和为了避免挑起南北争端，而被派来秘密保护他的朝鲜特级军官闵泰久（玄彬饰）产生了爱情。可面对国家和现实的阻碍，他们必须要做出选择。离别之际，朝鲜政府偶然发现了二人的爱情，...</Text>
            </View>
        )
    }

    function allPlayBtn() {
        return (
            <View style={{display: "flex", flexWrap: "wrap", flexDirection: "row", paddingHorizontal: 5}}>
                {
                    nums.map((item, index) => {
                        return (
                            <View
                                key={index}
                                style={[{alignSelf: "flex-start"}, {marginVertical: 10}]}
                            >
                                <TouchableOpacity onPress={() => setActive(index)}>
                                    <Text
                                        key={index}
                                        style={[
                                            styles.allPlayBtn,
                                            index === active && {color: theme.mainBackgroundColor}
                                        ]}>
                                        {item}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        )
                    })
                }
            </View>
        )
    }


    function minScreen() {
        return (
            <View>
                <View style={{paddingHorizontal: 10}}>
                    <View
                        style={methodFlexAlign('sb', 'center')}>
                        <Text style={{fontSize: 18, color: theme.mainFontColor}}>爱的迫降</Text>
                        <TouchableOpacity onPress={() => onOpenDesc(ModalEnum.D)}>
                            <View style={methodFlexAlign('', 'center')}>
                                <Text style={{color: theme.deepGrey}}>简介</Text>
                                <Entypo name="chevron-thin-right" color={theme.deepGrey} size={14}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <Text style={{color: theme.deepGrey, paddingVertical: 10, fontSize: 14}}>16集全</Text>
                    <View style={styles.seriesHead}>
                        <Text style={{color: theme.mainFontColor, fontSize: 16}}>选集</Text>
                        <Entypo name="chevron-thin-right" color={theme.deepGrey} size={16}
                                onPress={() => onOpenDesc(ModalEnum.L)}/>
                    </View>
                    <ScrollView
                        style={{marginVertical: 15}}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}>
                        {
                            nums.map((item, index) => {
                                return (
                                    <View
                                        key={index}
                                        style={{alignSelf: "flex-start"}}
                                    >
                                        <TouchableOpacity onPress={() => setActive(index)}>
                                            <Text
                                                key={index}
                                                style={[
                                                    styles.albumItem,
                                                    index < nums.length - 1 && {marginRight: 10},
                                                    index === active && styles.active
                                                ]}>
                                                {item}
                                            </Text>
                                        </TouchableOpacity>
                                    </View>
                                )
                            })
                        }
                    </ScrollView>
                </View>
                <Modalize
                    ref={modalizeRef}
                    scrollViewProps={{showsVerticalScrollIndicator: false}}
                    snapPoint={300}
                    adjustToContentHeight={true}
                    modalStyle={{borderTopLeftRadius: 0, borderTopRightRadius: 0}}
                    HeaderComponent={
                        <View style={[styles.modalHead, methodFlexAlign('sb')]}>
                            <Text style={{fontSize: 20}}>爱的迫降</Text>
                            <AntDesign name="close" size={20} onPress={() => onCloseDesc()}/>
                        </View>
                    }
                    withHandle={false}
                >
                    {modalType === 0 && desView()}
                    {modalType === 1 && allPlayBtn()}
                </Modalize>
            </View>
        )
    }

    function getEvent(event: any) {
        const {locationX, locationY} = event.nativeEvent
        if (locationX > 358 && locationX <= 394 && locationY > 268 && locationY <= 290) {
            console.log('no/yew')
        }
    }

    return (
        <View style={{flex: 1, backgroundColor: theme.whiteColor}}>

            <TouchableNativeFeedback style={{width: width, height: height}} onPress={event => getEvent(event)}>
                <View style={{width: width, height: height}}>
                    <WebView
                        javaScriptEnabled={true}
                        mixedContentMode="compatibility"
                        source={{uri: 'https://ww4.hanjutv.com/index.php?path=https://meiju4.qfxmj.com/20190107/Fk1ma5Dr/index.m3u8&f=ck_m3u8'}}
                    />
                </View>
            </TouchableNativeFeedback>

            {/*<VideoPlayer />*/}
            {!fullScreen && minScreen()}
        </View>
    )
}

const {width, height} = Dimensions.get('window')
const styles = StyleSheet.create({
    title: {
        fontSize: 16,
        color: theme.mainFontColor
    },
    extra: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center"
    },
    seriesHead: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    },
    albumItem: {
        width: 45,
        height: 45,
        textAlign: "center",
        lineHeight: 45,
        borderRadius: 7,
        backgroundColor: theme.bodyBackgroundColor,
        color: theme.mainFontColor
    },
    active: {
        color: theme.whiteColor,
        backgroundColor: theme.dangerColor
    },
    des: {
        marginBottom: 9,
        color: theme.mainFontColor
    },
    modalHead: {
        paddingHorizontal: 10,
        paddingVertical: 10,
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: "solid",
        borderColor: theme.shallowGrey
    },
    allPlayBtn: {
        width: (width / 5 - 10 - 2),
        height: (width / 5 - 10 - 2),
        lineHeight: (width / 5 - 10 - 2),
        fontSize: 18,
        marginHorizontal: 5,
        textAlign: "center",
        borderRadius: 7,
        backgroundColor: theme.bodyBackgroundColor,
        color: theme.mainFontColor
    }
})

export default VideoInfo
